<template>
  <div class="crowdfunding-orders">
    <!-- 项目信息 -->
    <div class="project-info">
      <el-descriptions :column="4" border>
        <el-descriptions-item label="项目名称">
          {{ projectInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="目标件数">
          {{ projectInfo.targetQuantity }}件
        </el-descriptions-item>
        <el-descriptions-item label="已订购">
          {{ projectInfo.currentQuantity }}件
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(projectInfo.status)">
            {{ getStatusText(projectInfo.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 订单列表 -->
    <el-table :data="orderList" stripe>
      <el-table-column prop="orderNo" label="订单号" width="180" />
      <el-table-column prop="customerName" label="购买人" width="120" />
      <el-table-column label="购买信息">
        <template #default="scope">
          <div>尺码：{{ scope.row.size }}</div>
          <div>颜色：{{ scope.row.color }}</div>
          <div>数量：{{ scope.row.quantity }}件</div>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="120">
        <template #default="scope">
          ¥{{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="下单时间" width="180" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getOrderStatusType(scope.row.status)">
            {{ getOrderStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" v-if="projectInfo.status === 'success'">
        <template #default="scope">
          <el-button 
            size="small"
            type="primary"
            @click="handleShip(scope.row)"
            :disabled="scope.row.status !== 'paid'"
          >
            发货
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()

// 项目信息
const projectInfo = ref({
  id: route.params.id,
  name: '2024春季班服定制',
  targetQuantity: 100,
  currentQuantity: 68,
  status: 'success'
})

// 订单列表
const orderList = ref([
  {
    orderNo: 'CF20240301001',
    customerName: '张三',
    size: 'L',
    color: '白色',
    quantity: 2,
    amount: 198,
    createTime: '2024-03-01 14:30:00',
    status: 'paid'
  },
    {
    orderNo: 'CF20240301001',
    customerName: '张三',
    size: 'L',
    color: '白色',
    quantity: 2,
    amount: 198,
    createTime: '2024-03-01 14:30:00',
    status: 'completed'
  }
])

// 项目状态
const getStatusType = (status) => {
  const statusMap = {
    funding: 'warning',
    success: 'success',
    failed: 'danger',
    completed: 'info'
  }
  return statusMap[status]
}

const getStatusText = (status) => {
  const statusMap = {
    funding: '募集中',
    success: '已达成',
    failed: '未达成',
    completed: '已结束'
  }
  return statusMap[status]
}

// 订单状态
const getOrderStatusType = (status) => {
  const statusMap = {
    unpaid: 'info',
    paid: 'warning',
    shipped: 'primary',
    completed: 'success'
  }
  return statusMap[status]
}

const getOrderStatusText = (status) => {
  const statusMap = {
    paid: '已付款',
    shipped: '已发货',
    completed: '已完成'
  }
  return statusMap[status]
}

// 发货处理
const handleShip = (order) => {
  // TODO: 调用发货API
  ElMessage.success(`订单${order.orderNo}已发货`)
}
</script>

<style scoped lang="scss">
.crowdfunding-orders {
  padding: 20px;

  .project-info {
    margin-bottom: 20px;
  }
}
</style>